<template>
  <div class="scan-result">
    <h2>扫码结果</h2>
    <div class="result-card">
      <p>当前扫码客户端：<strong>{{ clientType }}</strong></p>
      <p>详细信息：{{ clientInfo }}</p>
    </div>
    <button @click="goBack">返回</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clientType: '未知客户端',
      clientInfo: ''
    }
  },
  mounted() {
    this.detectClient()
  },
  methods: {
    detectClient() {
      const userAgent = window.navigator.userAgent.toLowerCase()
      // 判断微信
      if (userAgent.indexOf('micromessenger')> 0) {
        this.clientType = '微信'
        // this.clientInfo = `微信内置浏览器 (UA: ${userAgent.substring(0, 100)}...)`
        this.clientInfo = `微信内置浏览器 (UA: ${userAgent})`
      
      // 判断支付宝
      } else if (userAgent.indexOf('alipayclient')> 0) {
        this.clientType = '支付宝'
        this.clientInfo = `支付宝内置浏览器 (UA: ${userAgent})`
      
      // 判断其他浏览器
      } else if (userAgent.indexOf('mobile')> 0) {
        this.clientType = '手机浏览器'
        this.clientInfo = `移动端浏览器 (UA: ${userAgent})`
      
      } else {
        this.clientType = '其他设备'
        this.clientInfo = `未知设备 (UA: ${userAgent})`
      }
    },
    goBack() {
      window.history.back()
    }
  }
}
</script>

<style scoped>
.scan-result {
  max-width: 500px;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
}
.result-card {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
}
button {
  padding: 10px 20px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background: #359469;
}
</style>